<template>
	<view>
		<view class="container">
			<block v-for="(item,index) in list" :key="index">
				<view class="s-goods-item">
					<image :src="item.image_url" class="s-goods-img"></image>
					<view class="s-goods-center">
						<view class="s-goods-name">
							{{item.name}}
						</view>
						<view class="s-goods-attr" v-if="item.specs">{{item.specs}}</view>
					</view>
				</view>
				<view class="s-rate-container">
					<view class="s-title">服务评价</view>
					<s-rate :current="item.level" :item_index="index" @change="level_change" normal="#ccc" active="#ff7900" :size="26"></s-rate>
					<view class="s-title-rate" v-if="item.level==1">非常差</view>
					<view class="s-title-rate" v-if="item.level==2">差</view>
					<view class="s-title-rate" v-if="item.level==3">一般</view>
					<view class="s-title-rate" v-if="item.level==4">好</view>
					<view class="s-title-rate" v-if="item.level==5">非常好</view>
				</view>
				<view class="s-cells">
					<textarea class="s-textarea" v-model="item.content" placeholder="发表你的评价..." maxlength="50" @input="content_input(index)" placeholder-class="s-phcolor-color"/>
					<view class="s-textarea-counter">{{item.content_length}}/50</view>
				</view>
				<view class="s-box-upload">
					<view class="s-upload-box">
						<view class="s-image-item" v-for="(it,ind) in item.images" :key="ind">
							<image :src="it.url" class="s-item-img" mode="aspectFill"></image>
							<view class="s-img-del" @tap="image_del(index,ind)"></view>
							<view class="s-upload-mask">
								<!-- <view class="s-upload-loading"></view>
								<text class="s-tips">上传中...</text> -->
								<view class="s-mask-btn" hover-class="s-hover"
								 :hover-stay-time="150" @tap.stop="image_preview(index,ind)">查看图片</view>
							</view>
						</view>
						<view class="s-upload-add" v-if="item.images.length<9" @tap="upload_file(index)">
							<view class="s-upload-icon s-icon-plus"></view>
						</view>
					</view>
				</view>
			</block>
			<view class="s-cmt-btn" v-if="list.length">
				<s-button type="danger" @click="order_evaluate">确定</s-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				id:'',
				list:[]
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.getOrderEvaluate();
		},
		methods: {
			//商品详情
			async getOrderEvaluate() {
				this.list = await this.$s.model.order.getOrderEvaluate({id:this.id})
			},
			//商品评价
			async order_evaluate() {
				await this.$s.model.order.orderEvaluate(this.list)
				await this.$s.uniApi.navigateBack({})
			},
			//更改星级
			level_change(e){
				this.list[e.item_index].level = e.index;
			},
			//监听input
			content_input(index){
				this.list[index].content_length = this.$s.api.getLength(this.list[index].content)
			},
			//图片上传
			async upload_file(index){
				var length = 9-this.list[index].images.length
				const res = await this.$s.http.upload(length)
				this.list[index].images.push(res)
			},
			//删除图片
			image_del(index,ind){
				this.list[index].images = this.$s.api.DeleteArrIndex(this.list[index].images,ind)
			},
			//查看图片
			image_preview(index,ind){
				var arr = []; 
				for(var i = 0;i<this.list[index].images.length;i++){
					arr.push(this.list[index].images[i].url)
				}
				uni.previewImage({
					current: this.list[index].images[ind].url,
					urls: arr
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'order_evaluate.scss';
</style> 
